<template>
  <div>
    <div class="rank-harder">
        <span class="iconfont icon-arrow-left-bold" @click="$router.go(-1)"></span>
      <div class="time">每日推荐:{{ time }}</div>
    </div>
    <div class="rank-title">
      <div class="left"><div><van-icon name="play-circle" color="rgb(255,60,47)" size="30px"/></div><div class="playAll">播放全部</div></div>
      <div><van-icon name="credit-pay" size="30px"/></div>
    </div>
    <div class="rank-list">
      <div class="">
        <van-cell
          center
          @click="setId(item.id)"
          v-for="(item,index) in dataSong"
          :key="index"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #right-icon>
           <van-icon name="play-circle-o" size="30" color="rgb(170,170,170)"/>
          </template>
          <template #icon>
            <span class="list-id">{{ index + 1 }}</span>
          </template>
          <template #title>
            <span class="custom-title">{{ item.name }}</span>
          </template>
          <template #label>
            <span class="icon"></span>
            <span class="custom-title">{{item.ar[0].name}}</span>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { getDaySong } from "../api/user";
export default {
  data: function () {
    return {
      time: null,
      dataSong:null
    };
  },
  methods: {
    setId(id) {
      this.$emit("get-player-id", id);
       this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
    },
  },
  created() {
    this.time = new Date().toLocaleDateString();  
      getDaySong().then((data) => {
        console.log(data);
        this.dataSong=data.data.dailySongs
      });
  },
};
</script>
<style lang="less">
.rank-harder {
  width: 100%;
  position: relative;
  height: 300px;
   background-image: url("https://img1.baidu.com/it/u=1953527116,2221959862&fm=26&fmt=auto");
   span{
       font-size: 24px;
       color: #fff;
   }
  .time {
    color: #fff;
    position: absolute;
    text-align: center;
    z-index: 1;
    left: 0px;
    margin: auto;
    right: 0px;
    bottom: 20px;
  }
}
.rank-title {
  display: flex;
    align-items: center;
    padding: 10px 16px;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
.playAll{
      font-size: 20px;
      font-weight: 600;
      margin-left: 10px;
      vertical-align: top;
  }
    }
  
}
.rank-list {
  .van-cell__title {
    flex: 2;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap;
    font-size: 17px;
  }
  .titles {
    color: #969777;
  }
  .list-id {
    font-size: 17px;
    margin-right: 10px;
  }
  .icon {
    display: inline-block;
    width: 32px;
    height: 16px;
    background-image: url("https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=");
    background-size: auto;
    background-repeat: no-repeat;
    vertical-align: text-bottom;
  }
}
</style>
